import React, { useState } from 'react';
import { Routes, Route, Link, useNavigate } from 'react-router-dom';
import WalletHome from './WalletHome';
import DidManager from './DidManager';
import CredentialManager from './CredentialManager';
import CredentialDetail from './CredentialDetail';
import CredentialImport from './CredentialImport';
import GenerateProof from './GenerateProof';

const WalletPage = () => {
  const [activePage, setActivePage] = useState('home');
  const navigate = useNavigate();

  const handleMenuClick = (page) => {
    setActivePage(page);
    navigate(`/wallet/${page}`);
  };

  return (
    <div className="wallet-page">
      <div className="container py-4">
        <div className="row">
          <div className="col-lg-3">
            <div className="card mb-4">
              <div className="card-body">
                <h5 className="card-title mb-3">钱包应用</h5>
                <div className="list-group">
                  <button
                    className={`list-group-item list-group-item-action ${activePage === 'home' ? 'active' : ''}`}
                    onClick={() => handleMenuClick('home')}
                  >
                    <i className="bi bi-house me-2"></i> 主页
                  </button>
                  <button
                    className={`list-group-item list-group-item-action ${activePage === 'dids' ? 'active' : ''}`}
                    onClick={() => handleMenuClick('dids')}
                  >
                    <i className="bi bi-person-badge me-2"></i> 身份管理
                  </button>
                  <button
                    className={`list-group-item list-group-item-action ${activePage === 'credentials' ? 'active' : ''}`}
                    onClick={() => handleMenuClick('credentials')}
                  >
                    <i className="bi bi-card-list me-2"></i> 凭证管理
                  </button>
                  <button
                    className={`list-group-item list-group-item-action ${activePage === 'proofs' ? 'active' : ''}`}
                    onClick={() => handleMenuClick('proofs')}
                  >
                    <i className="bi bi-shield-check me-2"></i> 生成证明
                  </button>
                </div>
              </div>
            </div>
            
            <div className="card">
              <div className="card-body">
                <h5 className="card-title">快速行动</h5>
                <div className="d-grid gap-2">
                  <button 
                    className="btn btn-outline-primary btn-sm"
                    onClick={() => handleMenuClick('dids/create')}
                  >
                    <i className="bi bi-plus-circle me-2"></i>
                    创建新身份
                  </button>
                  <button 
                    className="btn btn-outline-primary btn-sm"
                    onClick={() => handleMenuClick('credentials/import')}
                  >
                    <i className="bi bi-download me-2"></i>
                    导入凭证
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <div className="col-lg-9">
            <Routes>
              <Route path="/" element={<WalletHome />} />
              <Route path="/home" element={<WalletHome />} />
              <Route path="/dids/*" element={<DidManager />} />
              <Route path="/credentials" element={<CredentialManager />} />
              <Route path="/credentials/import" element={<CredentialImport />} />
              <Route path="/credentials/:id" element={<CredentialDetail />} />
              <Route path="/proofs/*" element={<GenerateProof />} />
            </Routes>
          </div>
        </div>
      </div>
    </div>
  );
};

export default WalletPage; 